import React, { useEffect, useState } from 'react'
import { Tabs, Row, Col, Card, Button } from 'antd'
import { SettingOutlined } from '@ant-design/icons'
import { ipc } from '@/ipcRenderer'
import { useDispatch, useSelector } from 'react-redux'
import {
  VoltageChart, MotorElectricityChart, MotorTemperatureChart, MotorDutyChart, CPUTemperatureChart,
  MotorFrequencyChart,
  MotorRateChart,
  SwitchButton,
  Protection,
  Operation,
  Control,
  PIDConfig,
  DACConfig,
  Battery,
  SpeedConfig,
  PwmOscilloscope
} from '@/components'

import UpgradeModel from '@/components/UpgradeModel';




export default function Home() {
  const dispatch = useDispatch()
  const ecsState = useSelector((state) => state.motor.ecsState)
  const motorState = useSelector((state) => state.motor.motorState)



  return (
    <div className="grid grid-cols-12 gap-4 p-4">
      <div className="col-span-3">
        <Card title="电机A占空比" className='h-full'>
          {JSON.stringify(motorState.motorAPWMDuty)}
          <PwmOscilloscope state={motorState.motorAPWMDuty}></PwmOscilloscope>
        </Card>
      </div>
      <div className="col-span-3">
        <Card title="电机B占空比" className='h-full'>
          {JSON.stringify(motorState.motorBPWMDuty)}
          <PwmOscilloscope state={motorState.motorBPWMDuty}></PwmOscilloscope>
        </Card>
      </div>
      <div className="col-span-4">
        <Card title="驱动器(A/B)温度" className='h-full'>
          <MotorTemperatureChart state={ecsState}></MotorTemperatureChart>
        </Card>
      </div>
      <div className="col-span-2 row-span-2 grid grid-cols-1 gap-4">
        {/* <div className="col-span-1 ">
          <div className='h-16'>
          <Battery
              style={{ width: "200px", height: "60px", marginTop: "4px", }}
              fontSize={20}
              value={ecsState.charge}
            />
          </div>
        </div> */}
        <div className="col-span-1">
          <Card title="电压" className='card-flat'>
            <div className="grid grid-cols-2 ">
              <div className="p-2 text-center border border-slate-700 rounded-bl-md">电压</div>
              <div className="p-2 text-center border border-slate-700 rounded-br-md">{ecsState.voltage5 || '-'}</div>
            </div>
          </Card>
        </div>
        {/* <div className="col-span-1">
          <Card title="电机(A/B)PWM占空比" className='card-flat'>
            <div className="grid grid-cols-2 ">
              <div className="p-2 text-center border border-slate-700">电机A</div>
              <div className="p-2 text-center border border-slate-700">{motorState.motorAPWMDuty || '-'}%</div>
              <div className="p-2 text-center border border-slate-700 rounded-bl-md">电机B</div>
              <div className="p-2 text-center border border-slate-700 rounded-br-md">{motorState.motorBPWMDuty || '-'}%</div>
            </div>
          </Card>
        </div> */}
        <div className="col-span-1">
          <Card title="电机(A/B)PWM频率" className='card-flat'>
            {/* <MotorFrequencyChart state={motorState}></MotorFrequencyChart> */}
            <div className="grid grid-cols-2">
              <div className="p-2 text-center border border-slate-700">电机A</div>
              <div className="p-2 text-center border border-slate-700">{motorState.motorAPWMFrequency / 1000 || '-'}</div>
              <div className="p-2 text-center border border-slate-700 rounded-bl-md">电机B</div>
              <div className="p-2 text-center border border-slate-700 rounded-br-md">{motorState.motorBPWMFrequency / 1000 || '-'}</div>
            </div>
          </Card>
        </div>

        <div className="col-span-1">
          <Card title="电机(A/B)运行状态" className='card-flat'>
            <Operation state={motorState}></Operation>
          </Card>
        </div>


        <div className="col-span-1">
          <Card title="电机(A/B)编码器数据" className='card-flat'>
            <div className="grid grid-cols-2  ">
              <div className="p-2 text-center border border-slate-700">电机A</div>
              <div className="p-2 text-center border border-slate-700">{motorState.motorACoder || '-'}</div>
              <div className="p-2 text-center border border-slate-700 rounded-bl-md">电机B</div>
              <div className="p-2 text-center border border-slate-700 rounded-br-md">{motorState.motorBCoder || '-'}</div>
            </div>
          </Card>
        </div>

      </div>
      <div className="col-span-3">
        <Card title="CPU温度" className='h-full'>
          <CPUTemperatureChart state={ecsState}></CPUTemperatureChart>
        </Card>
      </div>
      <div className="col-span-3">
        <Card title="电机(A/B)电流" className='h-full'>
          <MotorElectricityChart state={ecsState}></MotorElectricityChart>
        </Card>
      </div>
      <div className="col-span-4">
        <Card title="电机(A/B)配置的速率" className='h-full'>
          <MotorRateChart state={motorState}></MotorRateChart>
        </Card>
      </div>
      {/* <div className="col-span-6">
        <Card  title="电压" className='h-full'>
          <VoltageChart state={ecsState}></VoltageChart>
        </Card>
      </div> */}


      {/*

      <div className="col-span-1">
        <Card  title="电机(A/B)硬件保护" className='h-full'>
          <Protection state={motorState}></Protection>
        </Card>
      </div>


      <div className="col-span-1">
        <Card  title="电机(A/B)控制状态" className='h-full'>
          <Control state={motorState} ></Control>
        </Card>
      </div>
 */}




      <div className="col-span-4">
        <Card title="PID参数配置" className='h-full card-flat'>
          <PIDConfig></PIDConfig>
        </Card>
      </div>



      <div className="col-span-3">
        <Card title="DAC参数配置" className='h-full card-flat'>
          <DACConfig></DACConfig>
        </Card>
      </div>
      <div className="col-span-3">
        <Card title="电机(A/B)控制参数配置 " className='h-full card-flat'>
          <SpeedConfig></SpeedConfig>
        </Card>
      </div>
      <div className="col-span-2">
        <Card className='h-full  flex items-center justify-center'>
          <Battery
            style={{ width: "120px", height: "50px", marginTop: "4px", }}
            fontSize={20}
            value={ecsState.charge}
          />
        </Card>
      </div>


    </div>

  )
}
